<template>
	<div>
		<el-card style="margin: 20px 0px">
			<!-- 三级联动全局组件 -->
			<CategorySelect @getCategoryId="getCategoryId" :show="scene != 0">
			</CategorySelect>
		</el-card>
		<!-- 底部有三部分模块切换 -->
		<el-card>
			<div v-show="scene == 0">
				<!-- 展示SPU列表结构 -->
				<el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addSpu">添加Spu</el-button>
				<el-table style="width: 100%" border :data="records">
					<el-table-column type="index" label="序号" width="80" align="center">
					</el-table-column>
					<el-table-column prop="spuName" label="SPU名称" width="width">
					</el-table-column>
					<el-table-column prop="description" label="SPU描述" width="width">
					</el-table-column>
					<el-table-column prop="prop" label="操作" width="width">
						<template slot-scope="{ row, $index }">
							<!-- 这里的按钮用hintbutton替换 -->
							<hint-button type="success" icon="el-icon-plus" size="mini" title="添加Sku"
								@click="addSku(row)"></hint-button>
							<hint-button type="warning" icon="el-icon-edit" size="mini" title="修改Spu"
								@click="updateSpu(row)"></hint-button>
							<hint-button type="info" icon="el-icon-info" size="mini" title="查看当前类Spu的所有实例Sku列表"
								@click="handler(row)">
							</hint-button>
							<el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="deleteSpu(row)">
								<hint-button type="danger" icon="el-icon-delete" size="mini" title="删除spu"
									slot="reference"></hint-button>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination style="text-align: center" :current-page="page" :page-sizes="[3, 5, 10]"
					:page-size="limit" layout="prev, pager, next, jumper,->, sizes,total" @current-change="getSpuList"
					@size-change="handleSizeChange" :total="total">
				</el-pagination>
			</div>
			<SpuForm v-show="scene == 1" @changeScene="changeScene" ref="spu"></SpuForm>
			<SkuForm v-show="scene == 2" ref="sku" @changeScenes="changeScenes"></SkuForm>
		</el-card>
		<el-dialog :title="`${spu.spuName}的sku列表`" :visible.sync="dialogTableVisible" :before-close="close">
			<!-- table展示sku列表-->
			<el-table :data="skuList" style="width: 100%" border v-loading="loading">
				<el-table-column prop="skuName" label="名称" width="width">
				</el-table-column>
				<el-table-column prop="price" label="价格" width="width">
				</el-table-column>
				<el-table-column prop="weight" label="重量" width="width">
				</el-table-column>
				<el-table-column label="默认图片" width="width">
					<template slot-scope="{row,$index}">
						<img :src="row.skuDefaultImg" style="width:100px;height:100px">
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>
<script>
	// 引入子组件
	import SpuForm from "./SpuForm";
	import SkuForm from "./SkuForm";
	export default {
		name: "Spu",
		data() {
			return {
				// 分类ID
				category1Id: "",
				category2Id: "",
				category3Id: "",
				// show 控制三级联动可操作性
				// show: true,
				page: 1,
				limit: 3,
				records: [], //SPU列表数据
				total: 0, //分页器一共需要展示数据条数
				scene: 0, //0 SPU列表数据 1添加SPU | 修改SPU 2添加SKU
				//控制对话框的显示与隐藏
				dialogTableVisible: false,
				spu: {},
				skuList: [], //存储的是SKU列表的数据
				loading: true
			};
		},
		methods: {
			// 三级联动自定义事件 将子组件对应ID传给父组件
			getCategoryId({
				categoryId,
				level
			}) {
				// 获取到1 2 3级ID level 区分几级ID
				if (level == 1) {
					this.category1Id = categoryId;
					// 清除2 3级ID
					this.category2Id = "";
					this.category3Id = "";
				} else if (level == 2) {
					this.category2Id = categoryId;
					// 清除3级ID
					this.category3Id = "";
				} else {
					this.category3Id = categoryId;
					// 获取三级列表数据展示
					this.getSpuList();
				}
			},
			// 获取Spu列表方法
			async getSpuList(pages = 1) {
				this.page = pages;
				// 需要携带参数 page limit category3Id
				const {
					page,
					limit,
					category3Id
				} = this;
				let result = await this.$API.spu.reqSpuList(page, limit, category3Id);
				// console.log(result)
				if (result.code == 200) {
					this.total = result.data.total;
					this.records = result.data.records;
				}
			},
			// 点击分页器按钮的回调
			// handleSizeChange(page){
			//   // console.log(page)
			//   this.page = page
			//   this.getSpuList()
			// }
			// 分页器展示数据条数变化回调
			handleSizeChange(limit) {
				// console.log(limit)
				this.limit = limit;
				this.getSpuList();
			},
			// 添加SPU按钮回调
			addSpu() {
				this.scene = 1;
				// 通知子组件SPUForm发请求
				this.$refs.spu.addSpuData(this.category3Id);
			},
			//修改某一个SPU回调
			updateSpu(row) {
				this.scene = 1;
				// 获取子组件spuform 调用子组件方法
				this.$refs.spu.initSpuData(row);
			},
			// SPUForm自定义事件回调 子传父
			changeScene({
				scene,
				flag
			}) {
				// flag区分保存按钮是添加操作还是修改操作
				// 切换场景
				this.scene = scene;
				// 添加或修改SPU时重新获取数据
				if (flag == "修改") {
					this.getSpuList(this.page);
				} else {
					// 添加SPU 回到第一页
					this.getSpuList();
				}
			},
			// 删除SPU回调
			async deleteSpu(row) {
				let result = await this.$API.spu.reqDeleteSpu(row.id);
				if (result.code == 200) {
					this.$message({
						type: "success",
						message: "删除成功",
					});
					// 如果当前页还有属性值数据 删除后停留在当前页 重新获取数据 否则停留在上一页
					this.getSpuList(this.records.length > 1 ? this.page : this.page - 1);
				}
			},
			// 添加SKU按钮回调
			addSku(row) {
				// 切换场景
				this.scene = 2
				// console.log(row)
				// 父组件调用子组件方法
				this.$refs.sku.getData(this.category1Id, this.category2Id, row)
			},
			// skuForm通知父组件修改场景
			changeScenes(scene) {
				this.scene = scene
			},
			// 查看SKU按钮回调
			async handler(spu) {
				this.dialogTableVisible = true
				this.spu = spu
				// 获取SKU列表数据进行展示
				let result = await this.$API.spu.reqSkuList(spu.id)
				// console.log(result)
				if(result.code == 200){
					this.skuList = result.data
					this.loading = false
				}
			},
			// 关闭弹出框回调
			close(done){
				// loading属性设置为真
				this.loading = true
				this.skuList = []
				done()//关闭对话框
			}
		},
		components: {
			SpuForm,
			SkuForm,
		},
		// 组件挂载完毕后只执行一次
		// mounted() {
		// 	console.log('发请求')
		// },
	};
</script>

<style scoped></style>
